<template>
  <div class="app-container leave-approve">
    <div class="head-container">
      <div>
        <el-select v-model="search.status" class="filter-item" placeholder="请选择状态">
          <el-option label="进行中" value="2"/>
          <el-option label="已结束" value="3"/>
        </el-select>
        <el-button class="filter-item" type="success" icon="el-icon-search" size="mini" @click="fetchData">搜索
        </el-button>
      </div>
    </div>

    <div class="head-container">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="编号" width="280" align="center">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="姓名" width="150">
          <template slot-scope="scope">
            {{ scope.row.userName }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="类型" width="150">
          <template slot-scope="scope">
            {{ scope.row.type }}
          </template>
        </el-table-column>
        <el-table-column label="请假日期" min-width="400" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.startTime }} {{ scope.row.startType }} 至 {{ scope.row.endTime }} {{ scope.row.endType }}</span>
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="申请日期" width="160" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.applyTime }}</span>
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="状态" width="100" align="center">
          <template slot-scope="scope">
            <wf-status :status="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="操作" width="250">
          <template slot-scope="scope">
            <work-flow-btn :row="scope.row" :type="2" @edit="edit" @approve="approve" @detail="detail"/>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <detail v-model="dialogVisible" :data="form" :readonly="false" @reload="fetchData"></detail>
  </div>
</template>

<script>
  import {approveList} from '@/api/wf/leave'
  import WorkFlowBtn from '@/components/WorkFlow/table'
  import WfStatus from '@/components/WorkFlow/status/index'
  import Detail from '../detail'

  export default {
    components: {
      WfStatus,
      WorkFlowBtn,
      Detail
    },
    data() {
      return {
        search: {
          pageNo: 0,
          type: null,
          startTime: null,
          endTime: null,
          startUserName: null,
          status: null
        },
        form: {},
        dialogVisible: false,
        list: null,
        listLoading: true
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      cancel() {
        this.dialogVisible = false
      },
      approve(obj) {
        this.form = obj
        this.dialogVisible = true
      },
      edit(obj) {
        this.form = obj
        this.dialogVisible = true
      },
      detail(obj) {
        this.form = obj
        this.dialogVisible = true
      },
      fetchData() {
        this.listLoading = true
        const param = this.search
        approveList(param).then(response => {
          if (response.code === 200) {
            this.list = response.data.content
          }
          this.listLoading = false
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .leave-approve {
    .search-item {
      margin-right: 10px;
    }

    ::v-deep .el-tabs__content {
      height: 100vh;
    }

    ::v-deep .vue-treeselect__menu {
      height: 120px;
    }
  }
</style>
